<template>
   <div class="page">
      <a-button @click="onDialog">弹出框</a-button>
      <a-modal v-model="visible" title="Title" on-ok="handleOk">
         <template slot="footer">
            <a-button key="back" @click="handleCancel">
               Return
            </a-button>
            <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
               Submit
            </a-button>
         </template>
         <p class="flex">Some contents...</p>
         <p>Some contents...</p>
         <p>Some contents...</p>
         <p>Some contents...</p>
         <p>Some contents...</p>
      </a-modal>
   </div>
</template>

<script type="es6">
   export default {
      name: "btn",
      data() {
         return {
            loading: false,
            visible: false
         }
      },
      mounted() {

      },
      methods: {
         onDialog() {
            this.visible = true
         },
         handleOk() {
         },
         handleCancel() {
         }
      }
   }
</script>

<style lang="scss" scoped>
   .flex {
      display: flex;
   }
</style>
